import React, { useEffect } from 'react';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import { setStorage } from '../../store';
import { userLogin } from '../../api/user/login'
const Login = () => {
  const navigate = useNavigate();
   const onFinish = async (values) => {
    const res = await userLogin(values)
    if(res.data.code === 200){
      let token = res.data.data.tokenHead + res.data.data.token
      setStorage('token',token)
      navigate('/admin')
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(()=>{
    // 初始化token
    setStorage('token','')
  },[])
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        width: '600px',
        height: '400px',
        border: '1px solid darkgray',
        position: 'absolute',
        padding: '50px',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default Login;
